<template>
  <el-container>
    <el-main>
      <el-select
        v-model="value"
        clearable
        filterable
        placeholder="请选择要查看的科目"
        @keyup.enter.native='getsec(value)'
      >
        <el-option
          v-for="item in sections"
          :key="item.sid"
          :label="item.sectionName"
          :value="item.sid"
        >
        </el-option>
      </el-select>
      <el-button
        @click="getsec(value)"
        style="margin-left:40px;margin-right:20px"
        type="primary"
        class="el-icon-upload el-icon--right"
      > 搜索</el-button>
      <el-table
        class="table table-hover"
        style="table-layout:fixed;text-align:left;margin-top:20px"
        width="100%"
        :data="section.threads"
      >
        <el-table-column
          label="题目编号"
          prop="tid"
        ></el-table-column>
        <el-table-column
          label="题目标题"
          prop="title"
        ></el-table-column>
        <!-- <el-table-column>
             <template slot="header" >
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
               </template>
          </el-table-column> -->
        <el-table-column align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Managethread",
  data() {
    return {
      value: '',
      index:0,
      sections: [],
      section: {},
      form:{sectionName: '',}
    }
  },
  mounted() {
    this.$http.get("/api/section").then((res) => {
      // console.log(res.status);
      // console.log(res.data);
      this.sections = res.data.sections;
    }).catch(function (error) {
      if (error.response) {
        // 请求已发出，但服务器响应的状态码不在 2xx 范围内
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else {
        // Something happened in setting up the request that triggered an Error
         console.log('Error', error.message);
      }
      console.log(error.config);
    })
  },
  methods: {
    getsec(value) {
      // console.log(value);
      this.index=value;
      this.$http.get("/api/section/" + value).then((res) => {
        // console.log(res.status);
        // console.log(res.data);
        this.section = res.data.section;
      }).catch(function (error) {
      if (error.response) {
        // 请求已发出，但服务器响应的状态码不在 2xx 范围内
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else {
        // Something happened in setting up the request that triggered an Error
         console.log('Error', error.message);
      }
      console.log(error.config);
      })
    },
    handleDelete(obj){
      // console.log(obj)
      this.$http.delete("/api/thread/"+obj.tid).then(res=>{
        // console.log(res)
        if(res.status == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 3000
          });
        }
        else {
          this.$message({
            message: "删除失败",
            type: "error",
            duration: 3000
          });
        }
        this.$http.get("/api/section/"+this.index).then(res=>{
          // console.log(res.data.section.threads)
          this.section=res.data.section
          // console.log(this.section)
        })
      })
    }
  }
};
</script>

<style lang = "less" scoped>
.tac {
  text-align: left;
  padding: 0px !important;
}
</style>
